(function()
{
      var inputFieldData = new Object();
            
      function inputFieldDialog( editor ){
        return {
          title : 'Properties Input Field',
          resizable : CKEDITOR.DIALOG_RESIZE_BOTH,
          minWidth : 400,
          minHeight : 400,
          onShow : function(){
            delete this.checkButton;

      			var element = this.getParentEditor().getSelection().getSelectedElement();
      			if ( element && element.getName() == "div" && element.getAttribute( 'type' ) == "inputField" )
      			{
      				this.checkButton = element;
      				this.setupContent( element );
      			}  
          },
          onOk : function(){
            var editor,
      				element = this.checkButton,
      				isInsertMode = !element,
              inputElement;
      
            this.commitContent( { element : element } );
      
      			if ( isInsertMode ){
      				editor = this.getParentEditor();
      				element = new CKEDITOR.dom.element('div');//editor.document.createElement( 'div' );
              inputElement = new CKEDITOR.dom.element('input');//editor.document.createElement( 'input' );
              
              element.setAttribute('type', 'inputField' );
      				element.setAttribute('class', 'inputField' );
      				element.setAttribute('style', 'overflow: hidden; border: 1px solid black; height: 14pt; width: ' + inputFieldData.width + ';');
      				
      				inputElement.setAttribute('style', 'height: 14pt; width: ' + inputFieldData.width + '; border: 0px solid black;');
      				inputElement.setAttribute('type', inputFieldData.type);
      				inputElement.setAttribute('name', inputFieldData.name);
      				inputElement.setAttribute('maxLength', inputFieldData.maxLength);
      				inputElement.setAttribute('value', inputFieldData.value);
              
              element.append(inputElement, true);
      			}
      			if ( isInsertMode ){
              
              editor.insertElement( element );
            }
          },
          contents : [
            {
              id : 'tab1',
              label : 'Tab1',
              title : 'Properties Input Field',
              elements : [{
                type : 'hbox',
                widths : ['200px', '200px'],
                children : [{
                  type : 'vbox',
                  children : [{
                    type : 'text',
                    label : 'Name<br />',
                    id : 'nameInputField',
                    setup : function (element){
                      this.setValue(element.getFirst().getAttribute('name') || '');
                    },
                    commit : function (element){
                      inputFieldData.name = this.getValue();  
                    }
                  },{
                    type : 'text',
                    label : 'Width<br />',
                    id : 'widthInputField',
                    'default': '200px',
                    setup : function (element){
                      this.setValue(element.$.style.width || '');
                    },
                    commit : function (element){
                      inputFieldData.width = this.getValue();
                    }
                  },{
                    type : 'select',
                    label : editor.lang.textfield.type + '<br />',
                    id : 'typeInputField',
                    'default' : 'text',
                    items : [
        							[ editor.lang.textfield.typeText, 'text' ],
        							[ editor.lang.textfield.typePass, 'password' ]
        						],
                    setup : function (element){
                      this.setValue(element.getFirst().getAttribute('type') || '');  
                    },
                    commit : function (element){
                      inputFieldData.type = this.getValue(); 
                    }
                  }]
                },{
                  type : 'vbox',
                  children : [{
                    type : 'text',
                    label : 'Value<br />',
                    id : 'valueInputField',
                    setup : function (element){
                      this.setValue(element.getFirst().getAttribute('value') || '');
                    },
                    commit : function (element){
                      inputFieldData.value = this.getValue();
                    }
                  },{
                    type : 'text',
                    label : 'Max characters<br />',
                    id : 'maxCharacterInputField',
                    setup : function (element){
                      this.setValue(element.getFirst().getAttribute('maxLength') || '');
                    },
                    commit : function (element){
                      inputFieldData.maxLength = this.getValue();
                    }
                  }]
                }]
              }]
            }
          ]
        };
      }
      
    	CKEDITOR.dialog.add( 'simulatedInputField', function( editor )
  		{
  			return inputFieldDialog( editor);
  		} );
})();